<template>
	<view class="tabbar flex u-flex-around">
		<view class="tab-item" @tap="changeTab(index)" :class="{ active: curIndex == index }" v-for="(item, index) in tabslist" :key="index">
			{{ item.text }}
		</view>
	</view>
</template>

<script>
export default {
	name: 'tabs',
	data() {
		return {
			tabslist: [
				{
					text: '日',
					value: 'date'
				},
				// {
				// 	text: '周',
				// 	value: 'week'
				// },
				{
					text: '月',
					value: 'yearMonth'
				},
				{
					text: '年',
					value: 'year'
				}
			],
			curIndex: 0
		};
	},
	methods: {
		changeTab(index) {
			if (this.curIndex != index) {
				this.curIndex = index;
				this.$emit('changeTab', this.tabslist[index]);
			}
		}
	}
};
</script>

<style lang="scss">
.tabbar {
	padding: 10upx;
}
.tab-item {
	padding: 10upx 40upx;
	border-radius: 50upx;
	font-size: 30upx;
	&.active {
		background: $u-primary;
		color: #fff;
	}
}
</style>
